import React, { Component, createContext, useContext } from 'react'


// 1. 创建一个上下文对象
const TitleContenxt = createContext()
const MainContenxt = createContext()

// 可以在控制台中查看到 context 的名字
TitleContenxt.displayName = 'title'
MainContenxt.displayName = 'main'

class First extends Component {

    render() {
        return (
            <div>
                <h3>First - {this.context.title} </h3>

                <Son />
            </div>
        )
    }
}
// 3.2 通过组件名的方式来接收
First.contextType = TitleContenxt

function Son(props) {
    // 3.2 通过 hooks 的方式进行使用
    const titlecontext = useContext(TitleContenxt)
    return (
        <h6> Son - {titlecontext.title} </h6>
    )
}


export default class App extends Component {

    state = {
        title: '辣条'
    }

    render() {
        return (
            <div>
                <h1>App - {this.state.title} </h1>
                {/* 2. 使用上下文对象中的 Provider，配合 value 属性进行后代传值 */}
                <TitleContenxt.Provider value={{
                    name: '高举',
                    title: this.state.title
                }}>
                    <MainContenxt.Provider value='哈哈哈哈哈'>
                        <First />
                    </MainContenxt.Provider>
                </TitleContenxt.Provider>

            </div>
        )
    }
}
